<template>
  <div>
      <div class="info-back  search-part">
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="grid-content">
                  <div class="back-icon" @click="back()">
                      <i class="fa fa-arrow-left" aria-hidden="true"></i>
                  </div>
                </div>
            </el-col>
            <el-col :span="15">
                <div class="grid-content ">
                  <div class="simple-search search-layout" style="display:none">
                    <el-input
                    icon="search"
                    v-model="param"
                    @keyup.enter.native="search"
                    >
                    </el-input>
                  </div>
                </div>
            </el-col>
        </el-row>
      </div>
    <el-table :data="information.data"
              border
              style="width: 100%; padding-top: 70px;" class="table-cell-cash">
      <el-table-column
              type="index"
              width="100"
              align="left">
      </el-table-column>
      <el-table-column
              property="membername"
              label="会员名称"
              align="left">
      </el-table-column>
      <el-table-column
              property="goodsname"
              label="商品名称"
              align="left">
      </el-table-column>
      <el-table-column
              property="quantity"
              label="数量"
              align="left"
              width="140"
      >
      </el-table-column>
      <el-table-column
              :formatter="numFormat"
              property="amount"
              label="金额"
              align="left"
              width="140">
      </el-table-column>
      <el-table-column
              property="bizdate"
              label="日期"
              align="left"
              width="200">
      </el-table-column>
    </el-table>

    <pagination :total="information.pagination.total" align="right" :change="onTableChange"
                :pageSizeChange="handlePageSizeChange" :page-size="pageSize" :size-options="[20, 30, 50]"
                v-if="true"></pagination>
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
      name:'keepAilve',
      data: function () {
          return {
             tableData: [],
             loading: false,
             param: '',
             total: '20',
             pageSize: 20,
             information: {
                 pagination: {},
                 data: []
             },
          }
      },
      watch: {
         tableData() {
             this.information.data = this.tableData;
         }
       },

      created: function (){
          this.$$("#content").scrollTop(0)
        this.onTableChange(1);
      },

      methods: {
        search: function (ev) {
            if(ev.keyCode==13){
              console.log('你按了回车键！')
              console.log(this.param);
              this.onTableChange(1);
            }
        },
        numFormat:function(row, column) {
           var num = row[column.property];
           if (num == undefined) {
             return "";
           }
           return Number(num).toFixed(2);
        },
        onTableChange: function (current) {
          // if(this.param == undefined){
          //   this.param = ""
          // }

          console.log(this.$route.query.type);
          let type = this.$route.query.type;
          let currentDate = new Date();
          let bizDate = moment(currentDate).format('YYYY-MM-DD');
          let args = {
              page: current,
              rows: this.pageSize,
              bizDate: bizDate,
              type : type,
              dateType: 'day',
              param:this.param
          }
          let url = '/Income/incomeEntry/desktop?' + this.$qs.stringify(args);
          console.log(url);
          let self = this;
          self.loading = true;
          this.$axioxs({
               method: 'get',
               url: url
            })
          .then(function (res) {
              console.log(JSON.stringify(res.data));
              console.log(res.data);
              self.loading = false;
              let data = res.data;
              let pageinfo = {};
              pageinfo.total = data.count;
              pageinfo.pageSize = data.rows;
              console.log(pageinfo.pageSize)
              pageinfo.current = data.page;
              pageinfo.last_page = data.totalPage;
              self.information.pagination = pageinfo;
              self.information.data = data.records;
              for(var i=0; i<self.information.data.length; i++){
                self.information.data[i].bizdate = moment(self.information.data[i].bizdate).format("YYYY-MM-DD");
              }
              self.pageSize = data.rows;
              console.log(">>>>>>>>>>>>>>>")
              console.log(self.tableData);
          })
          .catch(function (error) {
            console.log(error);
            // self.loading = true;
          });
        },
        handlePageSizeChange(pageSize) {
            console.log('pageSize', pageSize);
            this.pageSize = Number(pageSize);
            // this.onTableChange(1);

        },
        back: function () {
          this.$router.push({
            name:'curve',
            path:'/analysis',
            params:{
              active: 'curve'
            }
          });
        },

//         search: function (ev) {
//             if(ev.keyCode==13){
//               console.log('你按了回车键！')
//               console.log(this.param);
//               this.read(this.param);
//             }
//         }
      }

  }
</script>

<style scoped>
.bought{
  background-color: #fff;
}
.info-back{
  margin-bottom: 10px;
}

.search-layout{
  margin-right: 20px;
}


</style>
